<template>
  <common-detail-list title="历史记录">
    <el-button slot="header" @click="back">返回</el-button>

    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        :model="queryParams"
        ref="queryForm"
        label-width="70px"
        @submit.native.prevent
        :inline="true"
      >
        <el-form-item label="执行时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            @change="dateChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="执行状态" prop="scanStatus">
          <el-select v-model="queryParams.scanStatus">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="扫描成功" :value="2"></el-option>
            <el-option label="扫描中" :value="1"></el-option>
            <el-option label="扫描失败" :value="-1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-search>

    <common-table slot="content" v-loading="loading" :data="historyList">
      <el-table-column
        label="任务名称"
        align="left"
        prop="nmapName"
        show-overflow-tooltip
      />
      <el-table-column label="执行开始时间" align="left" prop="startTimeStr" />
      <el-table-column label="执行结束时间" align="left" prop="overTimeStr" />
      <el-table-column label="执行进度" align="left" prop="overTimeStr">
        <template slot-scope="scope">
          <el-progress
            :percentage="scope.row.remark ? Number(scope.row.remark) : 0"
            :status="Number(scope.row.remark) === 100 ? 'success' : null"
          >
          </el-progress>
        </template>
      </el-table-column>
      <el-table-column label="执行状态" align="left" prop="scanStatus">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.scanStatus === 2" type="success"
            >扫描成功
          </el-tag>
          <el-tag v-if="scope.row.scanStatus === 1" type="warning"
            >扫描中</el-tag
          >
          <el-tag v-if="scope.row.scanStatus === -1" type="danger"
            >扫描失败</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="执行时长" align="left" prop="executionTime" />
      <el-table-column label="执行人" align="left" prop="createBy" />
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <WebSocket :currentModule="'autoFind'" :path="'nmapWebSocket'"></WebSocket>
  </common-detail-list>
</template>

<script>
import { fetchHistoryList } from "@/api/analysisCenter/assetsScan";
import WebSocket from "@/layout/components/websocket.vue";
import { mapState } from "vuex";

export default {
  components: {
    WebSocket,
  },

  props: {
    detailId: {
      type: String,
      default: "",
    },
  },

  computed: {
    ...mapState("notice", ["historyResult"]),
    historyList() {
      if (this.historyResult.id) {
        return this.list.reduce((r, c) => {
          if (c.id === this.historyResult.id) {
            c.overTimeStr = this.historyResult.overTimeStr;
            c.scanStatus = this.historyResult.scanStatus;
            c.executionTime = this.historyResult.executionTime;
            c.remark = this.historyResult.remark;
          }
          r.push({
            ...c,
          });
          return r;
        }, []);
      }
      return this.list;
    },
  },

  data() {
    return {
      total: 0,
      loading: false,
      list: [],
      date: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scanStatus: null,
      },
    };
  },

  created() {
    this.getList();
  },

  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    back() {
      this.$emit("back");
    },

    submitForm() {
      this.getList();
    },

    getList() {
      this.loading = true;
      fetchHistoryList({ nmapId: this.detailId, ...this.queryParams })
        .then((res) => {
          if (res && res.code == 200) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    dateChange() {
      let endTime = null,
        beginTime = null;
      if (this.date && this.date.length > 0) {
        beginTime = this.date[0];
        endTime = this.date[1];
      }
      this.queryParams.beginTime = beginTime || null;
      this.queryParams.endTime = endTime || null;
    },

    resetQuery() {
      this.date = [];
      this.queryParams = this.$options.data().queryParams;
    },
  },
};
</script>
<style lang="scss" scoped></style>
